<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@include file="/tagDeclare.jsp"%>
<%@include file="/headDeclare.jsp"%>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>查看墙体信息</title>
	<base href="<%=basePath%>"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rhPVE2HvyR3DbvYWe7DOWGS4"></script>
	<style type="text/css"> 
	  fieldset,legend,form,table,tr,td,textarea{margin:0;padding:0}
	  form label {font-weight:bold;}
	  .td-right {text-align: right;}
	  table{margin:10px 10px};
	  td{line-height: 40px;}
	  input[type="text"]{width:250px;}
	  input[type="password"]{width:250px;}
	  input[type="textarea"]{width:250px;}
	  body,html,#main {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 0;
		font-family: "微软雅黑";
		}
		#wall_div {
		width: 100%;
		height: 40%;
		overflow: hidden;
		margin: 0;
		font-family: "微软雅黑";
		float: left;
		}
		#allmap {
		width: 100%;
		height: 60%;
		overflow: hidden;
		margin: 0;
		font-family: "微软雅黑";
		float: left;
		}
	</style>

	<script type="text/javascript">
	
	  $(document).ready(function(){
		  
		  $().piroBox({
				my_speed: 400, //animation speed
				bg_alpha: 0.1, //background opacity
				slideShow : true, // true == slideshow on, false == slideshow off
				slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
				close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
				
			});
			
	  });


	   //返回列表页面
	   function btn_return(){
		    var qs = $("#qs").val();
	    	window.location.href="<%=basePath%>wall/list.do?" + qs;
	   }

	   function showFiles(){
		   $("#fileQueue").empty();
		   var fileStr = $("#images").val();
		   var fileHtml = "";
		   var arr=fileStr.split(";"); 
		   for (var i=0;i<arr.length ;i++ ){ 
			   fileHtml = fileHtml +"<p>"+arr[i]+"</p>";
		   } 
		   $("#fileQueue").append(fileHtml);
	   }
		
	</script>
</head>
<body>
<div id="main">
	<div id="allmap" ></div>

  <div id="wall_div" style="overflow-y:auto; overflow-x:auto;">
    <fieldset>
      <legend>查看墙体：</legend>
        <input id="qs" name="qs" type="hidden" value="${qs}"/>
        <input type="hidden" name="role" id="role" value="${username_attr.role }"/>
        <input type="hidden" name="high" id="high" value="${wall.high }"/>
        <input type="hidden" name="width" id="width" value="${wall.width }"/>
        <input type="hidden" name="area" id="area" value="${wall.area }"/>
        <input type="hidden" name="username" id="username" value="${wall.username }"/>
        <input id="addr"  type="hidden" value="${wall.province }${wall.city }${wall.county }${wall.address }"/>
        <table>
            <tr>
			    <td class="td-right"><label for="province">省市县：</label></td>
			    <td>${wall.province }${wall.city }${wall.county }</td>
			    <td class="td-right"><label for="address">地址：</label></td>
				<td>${wall.address }</td>
			</tr>
			<tr>
				<td class="td-right"><label for="bugLevel">规格：</label></td>
				<td>高:${wall.high }(m)*宽:${wall.width }(m)=面积:${wall.area }(m<sup>2</sup>)</td>
				<td class="td-right"><label for="username">姓名：</label></td>
				<td>${wall.username }</td>
			</tr>
			<tr>
				<c:if test="${username_attr.role == 1 }">
					<td class="td-right"><label for="tel">电话：</label></td>
					<td>${wall.tel }</td>
				</c:if>
				<td class="td-right"><label for="status">租赁类别：</label></td>
				<td>
					<c:if test="${wall.status ==0 }">空白</c:if>
					<c:if test="${wall.status ==1 }">自租</c:if>
					<c:if test="${wall.status ==2 }">他租</c:if>
				</td>
			</tr>
			<tr>
				<td class="td-right"><label for="status">客户名称：</label></td>
				<td>${wc.cname }</td>
				<td class="td-right"><label  for="status">行业列表：</label></td>
				<td>
					<select id="trade" name="trade" style="width:100px;" disabled="disabled">
	            	   <option value="" style="color:red;">--选择行业--</option>
	                   <c:forEach var="trade"  items="${tradeList }">
	                		<option value="${trade.itemName }" <c:if test="${trade.itemName eq wc.trade}">selected="selected"</c:if>>${trade.itemValue }</option>
	            		</c:forEach>
              		</select>
				</td>
			</tr>
			<tr>
				<td class="td-right"><label for="status">租赁时间：</label></td>
				<td>${wc.rentTime}</td>
				<td class="td-right"><label for="status">到期时间：</label></td>
				<td>${wc.endTime}</td>
			</tr>
			
			<tr>
				<td class="td-right"><label for="lv" >评估等级：</label></td>
				<td>
					<c:if test="${wall.lv ==0 }">优</c:if>
					<c:if test="${wall.lv ==1 }">良</c:if>
					<c:if test="${wall.lv ==2 }">中</c:if>
				</td>
				<c:if test="${username_attr.role == 1 }">
					<td class="td-right"><label  for="status">价格：</label></td>
					<td>${wall.price }</td>
				</c:if>
			</tr>
			<tr>
				<td class="td-right"><label for="images" >图片：</label></td>
				<td>
					<c:forEach items="${wall.images }" var="image">
						<a href="${image }" class="pirobox_gall"  title="${wall.username }-${wall.tel}" >
							<img src="${image }"  style="width:20px;height: 20px;" />
						</a>
					</c:forEach>
				</td>
				<td class="td-right"><label for="images" >备注：</label></td>
				<td>${wall.memo}</td>
			</tr>
			<tr>
				<td></td>
				<td>
				    <input type="button" id="btn_back" value="返回" onclick="btn_return();" style="width: 80px;" />
				</td>
			</tr>
        </table>
        
    </fieldset>
    </div>
	
</div>
</body>
</html>

<script type="text/javascript">
	var map = null;
	//百度地图API功能
	map = new BMap.Map("allmap"); // 创建Map实例
	map.centerAndZoom(new BMap.Point(119.28, 25.88), 10); // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
	map.setCurrentCity("福州"); // 设置地图显示的城市 此项是必须设置的
	
	map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
	
	var myGeo = new BMap.Geocoder();
	var info = new Array($("#addr").val(),$("#high").val(),$("#width").val(),$("#area").val(),$("#username").val());
	geocodeSearch(info);
	
	var role = document.getElementById("role").value;
	
	function geocodeSearch(info) {
		myGeo.getPoint(info[0], function(point) {
			if (point) {
				addMarker(info, point, new BMap.Label(info[0],
						{
							offset : new BMap.Size(20, -10)
						}));
			}
		}, "福州市");
	}
	// 编写自定义函数,创建标注
	function addMarker(info, point, label) {
		marker = new BMap.Marker(point);
		marker.enableDragging();
		var telContent = "";
		if(role==1) telContent = " 联系方式："+222;
		marker.addEventListener("click", function() {
			var sContent =  "<div width = '320'><h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+info[0]+"</h4>" + 
			"<p style='margin:0;line-height:1.5;font-size:13px;'>地址："+info[0]+"&nbsp;&nbsp;</p>"+
			"<p style='margin:0;line-height:1.5;font-size:13px;'>规格(m)：宽"+info[2]+"*高"+info[1]+"=面积"+info[3]+"(m<sup>2</sup>)</p>"+
			"<p style='margin:0;line-height:1.5;font-size:13px;'>姓名："+info[4]+telContent+"</p>"+
			"</div>";
			var infoWindow = new BMap.InfoWindow(sContent);
			this.openInfoWindow(infoWindow);
			   //图片加载完毕重绘infowindow
// 			   document.getElementById('imgDemo').onload = function (){
				   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
// 			   }
		});
		map.addOverlay(marker);
		marker.setLabel(label);

	}
</script>

